<template>
  <el-dialog
    draggable
    overflow
    :title="titleMap[mode]"
    v-model="visible"
    :width="1000"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <sk-tabs type="border-card">
      <el-tab-pane ref="tab" label="基础信息">
        <el-form
          :model="form"
          :rules="rules"
          ref="dialogForm"
          label-width="100px"
          label-position="right"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="编号" prop="code">
                <el-input
                  label="编号"
                  placeholder="自动生成"
                  v-model="form.code"
                  readonly
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单据日期" prop="billdate">
                <el-date-picker
                  v-model="form.billdate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商" prop="company_id">
                <skAutoChoose
                  v-model="form.company.name"
                  :name="'company'"
                  :assign="form"
                  :params="{
                    'category.finance_id': -1,
                  }"
                >
                </skAutoChoose>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="是否含税" prop="tax_id">
                <el-switch
                  v-model="form.tax_id"
                  active-value="1"
                  inactive-value="0"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <sc-VxeTable
            ref="xGrid1"
            :gridEvts="gridEvents"
            :gridOps="gridOps"
            :data="form.details"
            :tablecode="'purchase_order_other_save'"
          >
          </sc-VxeTable>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="附件">
        <sk-upload
          v-model="form.attachments"
          :limit="10"
          draggable
          tip="单个文件不要超过10M,请上传图像格式文件"
        >
        </sk-upload>
      </el-tab-pane>
    </sk-tabs>

    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import skDicSelect from "@/components/skDicSelect";
import skBrowserChoose from "@/components/skBrowserChoose";
import skAutoChoose from "@/components/skAutoChoose";
export default {
  emits: ["success", "closed"],
  components: { skDicSelect, skAutoChoose, skBrowserChoose },
  data() {
    return {
      mode: "edit",
      gridEvents: {
        beforeAddRow: row => {
          if ((this.form.company_id ?? 0) > 0) {
            row.company_id = this.form.company_id;
            row.company = this.form.company;
            row.type_id = 16;
          } else {
            this.$refs.dialogForm.validate(() => {});
            return false;
          }
        },
      },
      gridOps: {
        height: 300,
        columns: [
          {
            field: "material.fullname",
            event: {
              select: ({ e, row }) => {
                row["material"]["spec"] = e.spec;
                row["unit_id"] = row["ounit_id"] = e.uunit_id;
              },
            },
          },
          {
            field: "auxiliary_quantity",
            event: {
              keyup: ({ row }) => {
                row.purchase_quantity = row["quantity"] = row["auxiliary_quantity"] * 25;
                this.computeAmount(row);
              },
            },
          },
          {
            field: "quantity",
            event: {
              keyup: ({ row }) => {
                row.purchase_quantity = row.quantity;
                this.computeAmount(row);
              },
            },
          },
          {
            field: "price",
            event: {
              keyup: ({ row }) => {
                this.computeAmount(row);
              },
            },
          },
          {
            field: "tax",
            event: {
              keyup: ({ row }) => {
                this.computeAmount(row);
              },
            },
          },
        ],
      },
      titleMap: {
        add: "新增",
        edit: "编辑",
      },

      form: {
        id: "",
        code: "",
        company: {
          name: "",
        },
        attachments: [],
        company_id: "",
        pay_way_id: null,
        details: [],
        billdate: this.$TOOL.SYS_DATE(),
      },
      rules: {
        billdate: [{ required: true, message: "单据日期必填" }],
        company_id: [{ required: true, message: "请选择供应商" }],
      },
      visible: false,
      isSaveing: false,
    };
  },
  mounted() {},
  methods: {
    computeAmount(row) {
      row["amount"] = (row.quantity * row.price).toFixed(2);
      console.log(row.purchase_quantity);
    },

    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;

      return this;
    },

    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          this.isSaveing = true;
          var res = await this.$API.purchase.order.save.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          }
        }
      });
    },
    async getItems(id) {
      var res = await this.$API.purchase.order.info.get({
        filter: [{ id: id }],
      });
      if (res.code == 200) {
        this.form = res.data;
      }
    },
    setType(type) {
      this.form.type = type;
    },
    //表单注入数据
    setData(data) {
      this.getItems(data.main_id);
    },
  },
};
</script>

<style></style>
